// import React from "react";
// 引入仓库实例
// import store from "./store";

// const App = () => {
//   return (
//     <>
//       <h2>react结合redux</h2>
//       <button>-</button>
//       <span>{store.getState().count}</span>
//       <button onClick={() => store.dispatch({ type: "add" })}>+</button>
//     </>
//   );
// };

// export default App;

import React from "react";
// 第二步，在组件中使用仓库数据
// connect是一个函数，返回一个高阶组件，用于连接组件和仓库
// 它需要两个参数，都是函数
// 第一个参数是一个函数，用于将仓库中的数据映射到组件的props中
// 第二个参数是一个函数，用于将仓库中的dispatch方法映射到组件的props中
import { connect } from "react-redux";

const mapStateToProps = (state) => {
  return {
    // 将仓库的count映射到组件的props中的count
    count: state.count,
    name: state.name,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    // 将仓库的dispatch方法映射到组件的props中的add
    add: function (n) {
      dispatch({ type: "add", payload: n });
    },
    minus() {
      dispatch({ type: "minus" });
    },
    changeName(name) {
      dispatch({ type: "changeName", payload: name });
    },
  };
};

const App = (props) => {
  console.log(props);
  return (
    <>
      <h2>react结合redux</h2>
      <button onClick={props.minus}>-</button>
      <span>{props.count}</span>
      <button onClick={() => props.add(2)}>+2</button>
      <button onClick={() => props.add(3)}>+3</button>

      <hr />

      <p>name: {props.name}</p>
      <button onClick={() => props.changeName("zhaoliu")}>btn</button>
    </>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
